<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body style="height: 3000px">
<div id="app">
    <common-head></common-head>

</div>
<script src="./vue.js"></script>
<script>
    // 定义一个公共混入
    const mixin = {
        data() {
            return {
                msg: '我是混入上的数据'
            }
        },
        methods: {
            changeMsg() {
                this.msg = '值改变了';
            }
        },
        computed: {
            reverseMsg() {
                return this.msg.split('').reverse().join('')
            }
        }
    }
    const CommonHead = {
        template: `
          <div>
          <h2>这是一个公共头部</h2>
          <button @click="changeMsg">按钮</button>
          {{ msg }}
          {{ reverseMsg }}
          、
          </div>
        `,
        // 新增mixins
        mixins: [mixin],
        data() {
            return {
                msg: "组件自己的数据"
            }
        },
        mounted() {
            console.log(this);
        }
    }
    Vue.component('CommonHead', CommonHead);
    const vm = new Vue({
        el: '#app'
    })
</script>
</body>
</html>